<template>
  <div class="tw-libcrumbs">
    <template v-if="showFront">
      <div class="tw-libcrumbs-front">
        <img v-if="frontIcon[0] && frontIcon[0] !== ''" class="tw-libcrumbs-front-icon" :src="`${$twApp.fileBaseUrl}${frontIcon[0].localPath}`" />
        <!-- <img class="tw-libcrumbs-front-icon" src="@assets/pos.png" /> -->
        <div class="tw-libcrumbs-front-label" v-html="frontLabel"></div>
      </div>
    </template>
    <template v-if="crumbList.length > 0">
      <div v-for="(item, index) in crumbList"
        :key="index"
        class="tw-libcrumbs-link">

        <a v-if="useClickFn"
          @click="handleClick(item)">{{item.name}}</a>

        <a :href="item.href" v-else
          :target="item.target">{{item.name}}</a>

        <i class="tw-libcrumbs-arrow"></i>
      </div>

      <div v-for="(current, index) in currentCrumbList"
        class="tw-libcrumbs-self"
        :key="index">
        <span>{{current.name}}</span>
        <i class="tw-libcrumbs-arrow"></i>
      </div>

    </template>

  </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'

export default {
  name: 'crumbs',

  mixins: [style],

  props,

  data () {
    return {
      crumbList: [],
      currentCrumbList: [],
      marginLeft: '3px'
    }
  },

  computed: {
    style () {
      return {
        currentCrumbColor: this.currentCrumbColor,
        currentCrumbFontSize: this.currentCrumbFontSize,
        crumbFontSize: this.crumbFontSize,
        crumbColor: this.crumbColor,
        crumbHoverColor: this.crumbHoverColor,
        crumbHoverHasUnderline: this.crumbHoverHasUnderline,
        iconSize: this.iconSize,
        iconColor: this.iconColor,
        iconMargin: this.iconMargin
      }
    }
  },

  methods: {
    handleClick (item) {
      if (this.clickFn !== '' && typeof this.clickFn === 'function') {
        this.clickFn(item)
      } else {
        if (item.href) {
          if (item.target === '_blank') {
            window.open(item.href, '_blank')
          } else {
            window.location.href = item.href
          }
        }
      }
    },
    setStyle () {
      let style = `
        ::root.tw-libcrumbs .tw-libcrumbs-self span {
          color: ${this.currentCrumbColor};
          font-size: ${this.currentCrumbFontSize};
        }

        ::root.tw-libcrumbs .tw-libcrumbs-link a {
          color: ${this.crumbColor};
          font-size: ${this.crumbFontSize};
        }

        ::root.tw-libcrumbs .tw-libcrumbs-link a:hover {
          color:  ${this.crumbHoverColor};
        }

        ::root.tw-libcrumbs .tw-libcrumbs-arrow {
          margin-right: ${this.iconMargin};
          margin-left: ${this.marginLeft};
          width: ${this.iconSize};
          height: ${this.iconSize};
          border-top-color: ${this.iconColor};
          border-right-color: ${this.iconColor};
        }

        ::root.tw-libcrumbs .tw-libcrumbs-front {
          color: ${this.crumbColor};
          font-size: ${this.crumbFontSize};
          margin-right: ${this.iconMargin};
        }

        ::root.tw-libcrumbs .tw-libcrumbs-front-icon {
          width: ${this.frontIconWidth};
          height: ${this.frontIconHeight};
          margin-top: -3px;
          margin-right: ${this.iconMargin};
        }
      `

      if (this.crumbHoverHasUnderline) {
        style += `
        ::root.tw-libcrumbs .tw-libcrumbs-link a:hover {
          text-decoration: underline;
        }`
      }

      this.addStyle(style)
    },

    init () {
      if (this.dataIsFromPortal) {
        this.getData()
      } else {
        this.initData(JSON.parse(JSON.stringify(this.crumbs)))
      }
    },

    /***
     * 通过接口获取导航数据
     */
    getData () {
      let params = {
        siteId: this.$siteConfig.siteId,
        // siteId: 'cF5j8CgLY3X7',
        showInNavigate: '1'

      }
      let crms = []
      window.axios.post(`${window.$twApp.gateway}/unified-portal/site/query/page`, params).then(resp => {
        if (resp.data.serverResult.resultCode === '200' && resp.data.result && resp.data.result.length > 0) {
          let list = resp.data.result
          let pageId = window.$ui.urlQuery.pageId
          // let pageId = 'mK2po5s3tOcf'
          const getCrms = function (pageId, list) {
            let pageName = list.filter(item => item.pageId === pageId)
            if (pageName.length > 0) {
              let temp = {
                name: pageName[0].navigateName || pageName[0].name,
                fileName: `${pageName[0].fileName}`,
                pageId: `${pageName[0].pageId}`,
                href: pageName[0].parentId === '0' ? `./${pageName[0].fileName}.html?pageId=${pageName[0].pageId}` : ''
              }
              crms.push(temp)
              if (pageName[0].parentId !== '0') {
                getCrms(pageName[0].parentId, list)
              }
            }
          }
          if (pageId) {
            getCrms(pageId, list)
          }
          crms.reverse()
          if (crms.length > 1) {
            for (let i = 1; i < crms.length; i++) {
              crms[i].href = `./${crms[0].fileName}.html?pageId=${crms[0].pageId}&mId=${crms[i].pageId}`
            }
          }
          if (crms.length > 0) {
            crms.push({
              "name": "内容详情"
            })
            this.initData(crms)
          }
        }
      }).catch(e => {
        console.log(e)
      })
      return crms
    },

    /***
     * 初始化数据
     */
    initData (list) {

      this.crumbList = []
      this.currentCrumbList = []
      list.forEach(item => {
        if (item.href) {
          this.crumbList.push(item)
        } else {
          this.currentCrumbList.push(item)
        }
      })

      let width = parseInt(this.iconSize.substr(0, this.iconSize.length - 2))
      let margin = parseInt(this.iconMargin.substr(0, this.iconMargin.length - 2))
      if (width > 0) {
        this.marginLeft = (margin - (Math.sqrt(2 * width * width) / 2).toFixed(1)) + 'px'
      }

    }
  },
  created () {
    this.init()
  },

  watch: {
    crumbs: {
      deep: true,
      handler () {
        this.init()
      }
    },
    dataIsFromPortal: {
      deep: true,
      handler () {
        this.init()
      }
    }
  }
}
</script>

<style lang="scss">
@import './css/index.scss';
</style>
